<template>
  <div id="brokenline">
    <div class="top-right-cmp">
      <dv-charts :option="option" />
    </div>
  </div>
</template>
<script>
export default {
  name: "BrokenLine",
  props: {
    linesdata: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      data: {},
      conf: {
        title: {
          text: "",
        },
        grid: {
          top: 80,
        },
        legend: {
          top: 50,
          data: [
            {
              name: "清算量",
              color: "rgb(0,103,149)",
            },
            {
              name: "结算量",
              color: "rgb(23,150,0)",
            },
          ],
          textStyle: {
            fontFamily: "Arial",
            // fontSize: 22,
            fill: "#3b95d2",
          },
        },
        xAxis: {
          data: [],
          axisLine: {
            style: {
              stroke: "#3b95d2",
              lineWidth: 1,
            },
          },
          axisLabel: {
            style: {
              fill: "#3b95d2",
              // fontSize: 20,
              rotate: 0,
            },
          },
        },
        yAxis: {
          min: 0,
          splitLine: {
            show: false,
          },
          name: "",
          data: "value",
          axisLine: {
            style: {
              stroke: "#3b95d2",
              lineWidth: 1,
            },
          },
          axisLabel: {
            style: {
              fill: "#3b95d2",
              // fontSize: 20,
              rotate: 0,
            },
          },
        },
        series: [
          {
            name: "清算量",
            data: [],
            type: "line",
            smooth: false,
            lineArea: {
              show: true,
              gradient: ["rgba(0,103,149, 1)", "rgba(0,103,149,0)"],
            },
            lineStyle: {
              stroke: "rgba(0,103,149, 1)",
              // lineWidth: 4
            },
            linePoint: {
              style: {
                fill: "rgba(0,103,149, 1)",
              },
              // radius: 4
            },

            yAxisIndex: 0,
          },
          {
            name: "结算量",
            data: [],
            type: "line",
            smooth: false,
            lineArea: {
              show: true,
              gradient: ["rgba(23,150,0, 1)", "rgba(23,150,0, 0)"],
            },
            lineStyle: {
              stroke: "rgba(23,150,0, 1)",
              // lineWidth: 4
            },
            linePoint: {
              style: {
                fill: "rgba(23,150,0, 1)",
              },
              // radius: 4
            },
          },
          {
            name: "销售额",
            data: [],
            type: "bar",
            barWidth: 49,
            // gradient: {
            //   color: ["rgba(45,187,250, .1)", "rgba(103, 224, 227, .1)"],
            // },
            barStyle: {
              fill: "rgba(0, 186, 255, 0.4)",
            },
            backgroundBar: {
              show: true,
              width: 30,
              style: {
                // fill: 'rgba(45,187,250, .1)'
                fill: "#2dbbfa",
                opacity: 0.1,
              },
            },
          },
        ],
      },
    };
  },
  // created() {
  //   let data = {
  //     time: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
  //     value: {
  //       s1: [1500, 1700, 1400, 2500, 1400, 2700, 1500],
  //       s2: [3500, 700, 1400, 2000, 1400, 700, 1500],
  //     },
  //   };
  //   this.data = data;
  // },
  computed: {
    option() {
      let data = this.linesdata || {};
      let opt = JSON.parse(JSON.stringify(this.conf));
      opt.xAxis.data = data.time || [];
      opt.series[0].data = (data.value && data.value.s1 && data.value.s1) || [];
      opt.series[1].data = (data.value && data.value.s2 && data.value.s2) || [];
      return opt;
    },
  },
  mounted() {
    // console.log(this.linesdata);
  },
};
</script>
<style lang="less" scoped>
.top-right-cmp {
  position: relative;
  padding: 0 50px;
  box-sizing: border-box;

  .chart-name {
    position: absolute;
    right: 70px;
    text-align: right;
    font-size: 20px;
    top: 10px;
  }
  .dv-charts-container {
    // background: antiquewhite;
    width: 840px;
    height: 450px;
    margin-left: -35px;
  }
}
</style>
